<template>
    <view class="password-input-container">
        <input
            :placeholder="placeholder"
            placeholder-class="input-placeholder"
            :password="isPasswordType"
            maxlength="18"
            :value="password"
            @input="$emit('update:password', $event.detail.value)"
        />
        <image src="@/static/img/login/show_password.png" class="show-password" @click="switchPasswordType"></image>
    </view>
</template>

<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
    password: String,
    placeholder: {
        type: String,
        default: '请输入密码'
    }
});
const emit = defineEmits(['update:password']);
const isPasswordType = ref(true);
function switchPasswordType() {
    isPasswordType.value = !isPasswordType.value;
}
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';
.password-input-container {
    @extend .row-layout;
    margin: $scale * 5px 0;
    padding: $scale * 5rpx $scale * 10rpx;
    justify-content: center;
    align-items: center;
    border-radius: $scale * 8rpx;
    input {
        color: black;
        font-size: $scale * 22rpx;
        padding: $scale * 10rpx 0;
        flex: 1;
    }
    .input-placeholder {
        color: #979797;
        font-size: $scale * 16rpx;
        padding: $scale * 10rpx 0;
        flex: 1;
    }
    .show-password {
        width: $scale * 22rpx;
        height: $scale * 22rpx;
        padding: $scale * 5rpx;
    }
}
</style>
